// 任务列表
<template>
  <div>
    <div class="box">
      <el-card>
        <el-form class="searchForm" :inline="true" :model="queryForm" label-width="100px">
          <el-row>
            <el-col :xs="24" :md="12" :lg="8">
              <el-form-item label="要求完成时间">
                <el-date-picker
                  v-model="queryForm.time1"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  style="width: 250px; background-color: transparent"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :md="12" :lg="8">
              <el-form-item label="项目名称">
                <el-input v-model="queryForm.proname" placeholder="请输入项目名称" />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :md="12" :lg="8">
              <el-form-item label="来源">
                <el-select v-model="queryForm.perl" clearable placeholder="请选择来源">
                  <el-option label="集团" value="集团"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :md="12" :lg="8">
              <el-form-item label="任务标题">
                <el-input v-model="queryForm.keytask" placeholder="请输入任务标题" />
              </el-form-item>
            </el-col>

            <el-col :xs="24" :md="12" :lg="8">
              <el-form-item label="分类">
                <el-input v-model="queryForm.classname" placeholder="请输入分类" />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :md="12" :lg="8">
              <el-form-item label="完成标准">
                <el-input v-model="queryForm.standstr" placeholder="请输入完成标准" />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :md="12" :lg="8">
              <el-form-item label="工作举措">
                <el-input v-model="queryForm.tasknote" placeholder="请输入工作举措" />
              </el-form-item>
            </el-col>

            <el-col :xs="24" :md="12" :lg="8">
              <el-form-item label="责任部门">
                <el-input v-model="queryForm.workdpnamearr" placeholder="请输入责任部门" />
              </el-form-item>
            </el-col>

            <el-col :xs="24" :md="12" :lg="8">
              <el-form-item label="标志性成果">
                <el-input v-model="queryForm.objectivearr" placeholder="请输入标志性成果" />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :md="12" :lg="8">
              <!-- <el-form-item label="完成进展">
                <el-input v-model.number="queryForm.comper" placeholder="请输入完成进展" />
              </el-form-item> -->
              <el-form-item label="完成平均比例">
                <el-input v-model="queryForm.comper1" placeholder="平均比例" style="width: 110px" />
              </el-form-item>
              <el-form-item label="-" label-width="15px">
                <el-input v-model="queryForm.comper2" placeholder="平均比例" style="width: 110px" />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :md="12" :lg="8">
              <el-form-item label="剩余天数">
                <el-input v-model="queryForm.expday1" placeholder="剩余天数" style="width: 110px" />
              </el-form-item>
              <el-form-item label="-" label-width="15px">
                <el-input v-model="queryForm.expday2" placeholder="剩余天数" style="width: 110px" />
              </el-form-item>
            </el-col>

            <el-col :xs="24" :md="12" :lg="8">
              <el-form-item label="是否超期">
                <el-select v-model="queryForm.overtype" clearable placeholder="请选择是否超期">
                  <el-option label="是" value="是"></el-option>
                  <el-option label="否" value="否"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item>
                <el-button type="primary" @click="onSearch()">查询</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-table :data="tableData" style="width: 100%" height="500" border>
          <el-table-column v-if="edit" align="center" label="填报" width="120">
            <template slot-scope="scope">
              <!-- <el-button type="warning" @click="onFill(scope.row)">填报</el-button> -->
              <el-button
                @click="onRevise(scope.row)"
                type="text"
                size="small"
                :disabled="scope.row.validstr == '草拟' || scope.row.validstr == '退回' ? false : true"
                >修改
              </el-button>
              <el-button
                @click="onDel(scope.row)"
                type="text"
                size="small"
                :disabled="scope.row.validstr == '草拟' || scope.row.validstr == '退回' ? false : true"
                >删除
              </el-button>
            </template>
          </el-table-column>
          <el-table-column prop="proname" label="项目名称" min-width="250" align="center">
            <template slot-scope="scope">
              <el-link type="success" @click="onlinktitle(scope.row)">{{ scope.row.proname }}</el-link>
            </template>
          </el-table-column>
          <el-table-column prop="classname" label="分类" min-width="180" align="center"> </el-table-column>
          <el-table-column prop="keytask" label="任务标题" min-width="300">
            <template slot-scope="scope">
              <el-link type="success" @click="onlinkTaskTitle(scope.row)">{{ scope.row.keytask }}</el-link>
            </template>
          </el-table-column>
          <el-table-column prop="tasknote" label="工作举措" min-width="300">
            <template slot-scope="scope">
              <div v-html="scope.row.tasknote"></div>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="objectivearr" label="工作举措" min-width="300">
            <template slot-scope="scope">
              <div v-html="scope.row.objectivearr"></div>
            </template>
          </el-table-column> -->
          <el-table-column prop="standstr" label="完成标准" min-width="300">
            <template slot-scope="scope">
              <div v-html="scope.row.standstr"></div>
            </template>
          </el-table-column>
          <el-table-column prop="comper" label="最新进度" min-width="180"> </el-table-column>
          <el-table-column prop="newfill" label="最新进展" min-width="300">
            <template slot-scope="scope">
              <el-progress class="showProgressColor" :percentage="scope.row.comper"></el-progress>
              <div v-html="scope.row.newfill"></div>
            </template>
          </el-table-column>
          <el-table-column prop="validstr" label="状态" min-width="180"> </el-table-column>
        </el-table>
        <el-pagination
          style="margin: 10px"
          :current-page="queryForm.pagenum"
          :page-sizes="[20, 50, 100]"
          :page-size="queryForm.pagesize"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="sizeChange"
          @current-change="pageChange"
        />
      </el-card>
    </div>
  </div>
</template>

<script>
import TasklistAdd from './TasklistDialog/TasklistAdd.vue'
import { QueryPageList, Del } from '@/api/task/index'
import { isCreatePro } from '@/api/Project/index'
export default {
  name: 'Tasklist',
  components: { TasklistAdd },

  data() {
    return {
      total: 0,
      form: {},
      queryForm: {
        pagenum: 1,
        pagesize: 20,
        userid: this.$store.getters.userInfo.id,
        orgid: this.$store.getters.userInfo.orgid,
        expday1: '',
        expday2: '',
        overtype: ''
      },
      tableData: [],
      edit: false
    }
  },
  watch: {
    $route: {
      immediate: true,
      handler(newId) {
        if (newId.path == '/Fourth/Tasklist/Tasklist') {
          this.onSearch()
        }
      }
    },
    '$route.query.expday1': {
      immediate: true,
      handler(newId) {
        this.queryForm.expday1 = newId
      }
    },
    '$route.query.expday2': {
      immediate: true,
      handler(newId) {
        this.queryForm.expday2 = newId
      }
    },
    '$route.query.overtype': {
      immediate: true,
      handler(newId) {
        this.queryForm.overtype = newId
      }
    }
  },
  created() {
    // this.onSearch()
  },
  methods: {
    async onIsCreatePro() {
      const result = await isCreatePro({ userid: this.$store.getters.userInfo.id })
      this.edit = result.success
    },

    // 点击页面显示条数
    sizeChange(size) {
      this.queryForm.pagesize = size
      this.onSearch()
    },
    // 点击下一页与页码
    pageChange(page) {
      this.queryForm.pagenum = page
      this.onSearch()
    },
    // 点击查询
    async onSearch() {
      // if (this.queryForm.time2 != undefined) {
      //   this.queryForm.mdates1 = this.queryForm.time[0]
      //   this.queryForm.mdates2 = this.queryForm.time[1]
      // } else {
      //   this.queryForm.mdates1 = this.queryForm.time
      //   this.queryForm.mdates2 = this.queryForm.time
      // }
      const { content } = await QueryPageList(this.queryForm)

      if (content != null) {
        content.list.forEach(item => {
          if (item.tasknote != null) {
            item.tasknote = item.tasknote.replace(/\\n/g, '<br/>')
            item.tasknote = item.tasknote.replace(/\n/g, '<br/>')
          }
          if (item.standstr != null) {
            item.standstr = item.standstr.replace(/\\n/g, '<br/>')
            item.standstr = item.standstr.replace(/\n/g, '<br/>')
          }
          // if (item.objectivearr != null) {
          //   item.objectivearr = item.objectivearr.replace(/\\n/g, '<br/>')
          //   item.objectivearr = item.objectivearr.replace(/\n/g, '<br/>')
          // }
        })
      }
      this.total = content.total
      this.tableData = content.list
    },
    // 点击修改
    onRevise(row) {
      this.$router.push('/Fourth/Tasklist/TasklistAdd?id=' + row.id + '&state=U')
    },
    // 单击删除
    onDel(row) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await Del({ id: row.id })
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.onSearch()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 点击填报
    onFill(row) {
      console.log(row)
      this.$router.push('/Fourth/EmployeeHome/type3')
    },
    // 项目名称
    onlinktitle(row) {
      this.$router.push('/Fourth/Tasklist/ImportDetailsC?id=' + row.proid + '&title=' + row.proname)
    },
    // 任务标题
    onlinkTaskTitle(row) {
      this.$router.push('/Fourth/Tasklist/TasklistAddC?id=' + row.id + '&title=' + row.proname + '&proid=' + row.proid)
    }
  }
}
</script>

<style scoped>
.box {
  padding: 20px;
  background-color: #fdfbf2;
}
.el-card {
  background-color: transparent;
}
.box >>> .el-table,
.el-table__expanded-cell {
  background-color: transparent;
  /* border: 1px solid #000; */
}

.box >>> input {
  background-color: transparent;
}
.box >>> .el-select {
  width: 93%;
}
.box >>> .el-table th {
  background-color: transparent !important;
  /* border: 1px solid #000; */
}
.box >>> .el-table tr {
  background-color: transparent !important;
  /* border: 1px solid #000; */
}
.box >>> .el-link {
  border-bottom: 1px solid #13ce66;
}
.searchForm >>> .el-input {
  width: 250px;
}
</style>
